<template>
  <div class="data-container">
    <div class="title">
      <div class="text">信息地区分布</div>
      <i class="icon el-icon-tickets" @click="handleDetail({})"></i>
    </div>
    <div class="line">
      <div class="filter-box">
        <div class="item">
          <div class="label">类型:</div>
          <el-select clearable v-model="cls" placeholder="请选择" @change="handleChange">
            <el-option v-for="item in clsOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </div>
      </div>
      <div class="text-right" @click="handleSwitch">
        <span v-if="active === 'map'"><i class="icon el-icon-set-up"></i>切换为图表</span>
        <span v-else><i class="icon el-icon-set-up"></i>切换为地图</span>
      </div>
    </div>
    <div id="echarts14" v-show="active === 'map'"></div>
    <div class="table-container" v-show="active === 'table'">
      <div class="tr header">
        <div class="th">排名</div>
        <div class="th">省份</div>
        <div class="th">共计</div>
        <div class="th">招标</div>
        <div class="th">拍卖</div>
        <div class="th">挂牌</div>
      </div>
      <div class="table">
        <div class="tr" v-for="(item, index) in dataList" :key="item.name" @click="handleDetail({ address: item.name })">
          <div class="td">{{ index }}</div>
          <div class="td">{{ item.name }}</div>
          <div class="td">{{ item.total }}</div>
          <div class="td" @click.stop="handleDetail({ address: item.name, label2: '招标' })">{{ item.zhao_biao }}</div>
          <div class="td" @click.stop="handleDetail({ address: item.name, label2: '拍卖' })">{{ item.pai_mai }}</div>
          <div class="td" @click.stop="handleDetail({ address: item.name, label2: '挂牌' })">{{ item.gua_pao }}</div>
        </div>
      </div>
    </div>
    <dv-decoration-3 class="decoration" />
  </div>
</template>
<script>
import echarts from 'echarts'
import { apiPMMap, apiPMType } from '@/api/industryData/index'
import '@/utils/china.js'
import { formatFormData } from '@/utils'

export default {
  name: 'panel4',
  props: {
    source: String,
  },
  data() {
    return {
      active: 'map',
      myEcharts: '',
      dataList: [],
      clsOptions: [],
      membership_level_code: '',
      cls: '',
    }
  },
  mounted() {
    this.getSelect()
    this.getData()
  },
  methods: {
    handleSwitch() {
      if (this.active === 'map') {
        this.active = 'table'
      } else {
        this.active = 'map'
      }
    },
    // 获取分类下拉
    getSelect() {
      apiPMType(
        formatFormData({
          source: this.source,
        })
      ).then((res) => {
        this.clsOptions = []
        if (res.data) {
          this.clsOptions = res.data.map((item) => {
            return {
              label: item.name,
              value: item.name,
            }
          })
        }
      })
    },
    // 获取数据
    getData() {
      const info = {
        hy: this.cls,
        source: this.source,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiPMMap(formData).then((res) => {
        const { data } = res
        this.dataList = data
        this.initEcharts()
      })
    },
    // 筛选项变化
    handleChange() {
      this.getData()
    },
    // 初始化图表
    initEcharts() {
      this.dataList.forEach((item) => {
        item.name = item.name
        item.value = item.total
      })
      const series = {
        name: this.cls ? this.cls : '全部分类',
        zoom: 1.2, // 设置比例比sesies的大，出现外围地图叠加效果
        type: 'map',
        mapType: 'china',
        label: {
          show: true,
          color: '#fff',
        },
        itemStyle: {
          // 图形样式
          areaColor: '#274d68',
          borderWidth: 1,
          borderColor: '#68cee0',
          shadowColor: 'rgba(255, 255, 255, 0.5)',
          shadowBlur: 10,
        },
        emphasis: {
          // 高亮状态下的多边形和标签样式
          label: {
            show: true,
            color: '#fff',
          },
          itemStyle: {
            areaColor: 'rgba(255, 255, 255, 0.4)',
            borderWidth: 2,
            borderColor: '#ffffff',
          },
        },
        data: this.dataList,
      }
      var max = this.dataList[0].total

      this.myEcharts = echarts.init(document.getElementById('echarts14'))
      var option = {
        legend: {
          top: '10%',
          textStyle: {
            color: '#ffffff',
          },
          selected: this.selected,
        },
        color: ['#68cee0', '#eedd78'],
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function (params) {
            // 显示模板
            if (params['data']) {
              return [params.name, '招标：' + params['data'].zhao_biao, '拍卖：' + params['data'].pai_mai, '挂牌：' + params['data'].gua_pao, '共计：' + params.value].join('<br>')
            } else {
              return params.name
            }
          },
        },
        geo: {
          map: 'china',
          zoom: 1.22, // 设置比例比sesies的大，出现外围地图叠加效果
          emphasis: {
            // 高亮状态下的多边形和标签样式
            disabled: true,
          },
          regions: [
            {
              name: '南海诸岛',
              itemStyle: {
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: '#009cc9',
                  },
                },
              },
            },
          ],
          itemStyle: {
            // 图形样式
            areaColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 2,
            borderColor: '#68cee0',
          },
        },
        visualMap: {
          min: 0,
          max,
          inRange: {
            color: ['rgba(0, 0, 0, 0)', '#274d68'], //控制颜色渐变的范围
          },
          calculable: true, //出现滑块
          bottom: '5%',
          textStyle: {
            color: '#ffffff',
          },
        },
        series,
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myEcharts.clear() // 清空画布
      const that = this
      setTimeout(() => {
        this.myEcharts.setOption(option)
        this.myEcharts.on('click', function (params) {
          that.handleDetail({ address: params.name })
        })
      }, 100)
    },
    // 计算地图的最大值
    handleMax(list) {
      let max = 0,
        temp = 0,
        count = 0
      max = temp = list.sort((a, b) => {
        return b.value - a.value
      })[10].value

      do {
        temp = temp / 10
        count++
      } while (temp > 1)
      return parseInt(max / Math.pow(10, count - 1)) * Math.pow(10, count - 1)
    },
    onResize() {
      if (this.myEcharts) {
        this.myEcharts.resize()
      }
    },
    handleDetail(query) {
      query.source = this.source
      query.hy = this.cls
      this.$router.push({
        name: 'AuctionDetail',
        query,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
$bgColor: #060a22;
$mainColor: #68cee0;
$mainColorOpcity: rgba(104, 206, 224, 0.3);

.title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  .icon {
    cursor: pointer;
  }
}

.data-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  overflow: hidden;
  position: relative;
}
.filter-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #ffffff;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    .label {
      margin-right: 10px;
    }
  }
}

#echarts14 {
  width: 100%;
  height: 100%;
}

::v-deep .el-select .el-input__inner {
  background: $mainColorOpcity;
  width: 200px;
  margin-right: 4px;
  color: #ffffff;
  height: 30px;
}
::v-deep .el-input__icon {
  line-height: 30px !important;
}

.decoration {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 250px;
  height: 30px;
}
.line {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text-right {
    cursor: pointer;
    .icon {
      margin-right: 5px;
    }
  }
}
.table-container {
  width: 100%;
  height: calc(100% - 100px);
  margin-top: 20px;
  position: relative;
  padding-top: 30px;

  .th {
    color: $mainColor;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
    &:nth-child(1) {
      width: 10%;
    }
    &:nth-child(2) {
      width: 20%;
    }
    &:nth-child(3) {
      width: 10%;
    }
    &:nth-child(4) {
      width: 15%;
    }
    &:nth-child(5) {
      width: 15%;
    }
    &:nth-child(6) {
      width: 15%;
    }
    &:nth-child(7) {
      width: 15%;
    }
  }
  .tr {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    &.header {
      position: absolute;
      left: 0;
      top: 0;
    }
    .td {
      color: #ffffff;
      height: 30px;
      text-align: center;
      &:nth-child(1) {
        width: 10%;
      }
      &:nth-child(2) {
        width: 20%;
      }
      &:nth-child(3) {
        width: 10%;
      }
      &:nth-child(4) {
        width: 15%;
      }
      &:nth-child(5) {
        width: 15%;
      }
      &:nth-child(6) {
        width: 15%;
      }
      &:nth-child(7) {
        width: 15%;
      }
    }
  }
}
.table {
  width: 100%;
  height: calc(100% - 30px);

  overflow: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 0;
  }
}
</style>
